{% extends "base.html.twig" %}
{% block title %}Testemonials
{% endblock %}
{% block head %}
	<link rel="stylesheet" href="styles/blog.css"/>
	{{ parent() }}
{% endblock %}

{% block content %}


	<div class="parallax-1">
		<div class="caption">
			<span class="border">Travel Journals</span>
		</div>
	</div>

	<main class="container">

		<div class="row g-5">
			<div class="col-md-8">
				<h2 class="mt-4">
					Tales from Elysium
				</h2>

				<!--twig insert starts -->
				{% if testimonials %}
					{% for testimonial in testimonials %}

						<article class="blog-post bg-light p-4 rounded-3 shadow-sm mb-3">
							<h3 class="fst-italic">{{ testimonial.comment_title }}</h3>
							<p class="m-0">
								<strong>By:</strong>
								{{ testimonial.first_name }}
							</p>
							<p class="m-0">
								<strong>Destination:</strong> <a href="https://travel.fsd01.ca/destinations#{{testimonial.id}}">{{ testimonial.destination_name }}</a>
							</p>

							<hr>

							<p>{{ testimonial.comment_body }}</p>

							<!--twig if check for images if true, add carousel-->
							{% if testimonial.image_filepath is not empty %}
								<div id="carouselExampleControls{{ testimonial.id }}" class="carousel slide" data-bs-ride="carousel{{ testimonial.id }}">
									<div class="carousel-inner">
										<div class="carousel-item active">
											<img src="{{ testimonial.image_filepath }}" class="d-block w-100" alt="{{ testimonial.comment_title }}">
										</div>
										<!-- non functional. May need a seperate table for testemonial images. refer to destinations for carousel if checks.-->
									</div>
									<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls{{ testimonial.id }}" data-bs-slide="prev">
										<span class="carousel-control-prev-icon" aria-hidden="true"></span>
										<span class="visually-hidden">Previous</span>
									</button>
									<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls{{ testimonial.id }}" data-bs-slide="next">
										<span class="carousel-control-next-icon" aria-hidden="true"></span>
										<span class="visually-hidden">Next</span>
									</button>
								</div>
							{% endif %}
							<p class="m-0 text-end">
								<strong>Posted on:</strong>
								{{ testimonial.createdTS }}
							</p>
							<hr>

						</article>

					{% endfor %}
				{% endif %}
				<!--twig insert ends -->

				<!-- to be researched and implemented if time permits-->
				<nav class="blog-pagination mt-4" aria-label="Pagination">
					<a class="btn btn-outline-info logInButton" href="#">Newer</a>
					<a class="btn btn-outline-secondary disabled logInButton" href="#" tabindex="-1" aria-disabled="true">Older</a>
				</nav>

			</div>

			<div class="col-md-4">
				<div class="position-sticky mt-4" style="top: 2rem;">
					<div class="p-4 mb-3 bg-light rounded shadow-sm">
						<h4 class="fst-italic">About</h4>
						<p class="mb-0">Welcome to
							<strong>Tales from Elysium</strong>. Here you'll find a collection of stories and pictures from the clients that have booked their dream trips through us. Here at "site name", we believe travel is more than just a vacation. It's an experience to be shared. Enjoy!</p>
					</div>

					<div class="p-4 bg-light mb-4 shadow-sm">
						<h4 class="fst-italic">Archives</h4>
						<ol class="list-unstyled mb-0">
							<li>
								<a class="btn logInButton" href="#">March 2021</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">February 2021</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">January 2021</a>
							</li>
							<li>
								<a class="btn logInButton" class="btn logInButton" href="#">December 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">November 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">October 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">September 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">August 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">July 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">June 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">May 2020</a>
							</li>
							<li>
								<a class="btn logInButton" href="#">April 2020</a>
							</li>
						</ol>
					</div>

				</div>
			</div>
		</div>
	</div>

</main>

<div class="parallax-1">
	<div class="caption">
		<span class="border">...escape</span>
	</div>
</div>{% endblock %}
